<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        #box1{
            width:100px;
            height:100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function (){
            /*
             拖拽流程：
             1.当鼠标在被拖拽元素按住时，开始拖拽
             2.鼠标移动时拖拽元素跟随鼠标移动
             3.松开时，拖拽元素停在当前位置
             */
            var box1=document.getElementById("box1");
            //开始拖拽 onmousedown
            box1.onmousedown=function (event){
                //div的偏移量
                var ol=event.clientX-box1.offsetLeft;
                var ot=event.clientY-box1.offsetTop;
                //为document绑定一个onmousemove事件
                document.onmousemove=function (event){
                    var left=event.clientX-ol;
                    var top=event.clientY-ot;
                    //修改box1的位置
                    box1.style.left=left+"px";
                    box1.style.top=top+"px";
                }
                //为元素绑定一个鼠标松开事件
                document.onmouseup=function (){
                    //取消document.onmousemove事件
                    document.onmousemove=null;
                    //取消document.onmouseup事件
                    document.onmouseup=null;
                }
            }
            /*
            绑定一个鼠标滚动事件
            onmousewheel鼠标滚动的事件，会在滚轮滚动时触发

            在火狐中使用DOMMouseScroll来绑定滚动事件
             -该事件需要addEventListener()函数绑定
             */
            box1.onmousewheel=function (event){
             //event.wheelDelta 可以获取滚轮滚动的方向,只看正负不看大小
                if(event.wheelDelta>0){
                    //    鼠标滚轮向下滚，box1边长，
                    box1.style.height=box1.clientHeight-10+"px";
                }
                else{
                    // 鼠标滚动向上滚，box1变短
                    box1.style.height=box1.clientHeight+10+"px";
                }
                //当滚动滚轮时，浏览器的滚动条也会随之滚动，如果不希望发生则 return false;
                return false;
            }
            /*
              键盘事件：
              onkeydown
               -按键被按下
               -对于onkeydown来说一直按着某个按键不松手，则事件会一直触发
               -当onkeydown连续触发时，第一次和第二次会间隔稍微长一些，其他的会非常快
              onkeyup
               -按键被松开
               键盘事件一般会绑定给一些可以获取焦点的对象
              可以通过keycode获取按键的编码
             */
            var dir=0;
            //定时器控制移动
            setInterval(function() {
                switch (dir){
                    case "ArrowLeft":
                        box1.style.left=box1.offsetLeft-10+"px";
                        break;
                    case "ArrowRight":
                        box1.style.left=box1.offsetLeft+10+"px";
                        break;
                    case "ArrowUp":
                        box1.style.top=box1.offsetTop-10+"px";
                        break;
                    case "ArrowDown":
                        box1.style.top=box1.offsetTop+10+"px";
                        break;
                }
            },30);
            //按下控制方向
            document.onkeydown=function (event){
                dir=event.key;
            }
            //当按键松开时，div不再移动
            document.onkeyup=function (){
                dir=0;
            }
        }

    </script>
</head>
<body>
<div id="box1"></div>
</body>
</html>